<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <title>红岩历史博物馆</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <section class="header">
        <img src="img/image002.png" alt="">
        <div>
            <input type="image" src="img/image003.png">
            <div>
                <p>设为首页</p>
                <p>加入收藏</p>
                <p>热线：023-65312300（沙坪坝片区）023-63303457（渝中片区）</p>
                <p>English</p>
            </div>
            <input type="search">
            <input type="button" value="搜索" style="background-color: red;color: white;width: 60px;height: 30px;">
        </div>
    </section>
    <div id="app" v-cloak>
        <li v-for="menu in menus"@mouseover="menu.show=!menu.show"@mouseout="menu.show=!menu.show">
            <a :href="menu.url">
                {{menu.name}}
            </a>
            <ul v-show="menu.show">
                <li v-for="subMenu in menu.subMenus">
                    <a :href="subMenu.url">{{subMenu.name}}</a>
                </li>
                
            </ul>
        </li>
    </div>
    <script>
        const data={
            menus:[
            {
                name:'关于红岩',url:'#',show:false,subMenus:[
                    {name:'红岩文化',url:'#'},
                    {name:'博物馆机构',url:"#"},
                    {name:'历史沿革',url:"#"}
                ]
            },
            {
                name:'公告动态',url:'#',show:false,subMenus:[
                    {name:'文博信息',url:'#'},
                    {name:'政务平台',url:"#"},
                    {name:'公告',url:"#"},
                    {name:'专题报告',url:"#"}
                ]
            },
            {
                name:'馆藏精品',url:'#',show:false,subMenus:[
                    {name:'一级文物',url:'#'},
                    {name:'二级文物',url:"#"},
                    {name:'三级文物',url:"#"}
                ]
            },
            {
                name:"陈列展览",url:'#',show:false,subMenus:[
                    {name:'虚拟展览',url:'#'},
                    {name:'基本陈设',url:'#'},
                    {name:'复原陈设',url:'#'},
                    {name:'临时展览',url:'#'},
                    {name:'展览交流',url:'#'},
                ]
            },
            {
                name:"研究开发",url:'#',show:false,subMenus:[
                    {name:'历史研究',url:'#'},
                    {name:'艺术创作',url:'#'},
                    {name:'影音在线',url:'#'},
                    {name:'文创产品',url:'#'},
                ]
            },
            {
                name:"公共教育",url:'#',show:false,subMenus:[
                    {name:'党性教育',url:'#'},
                    {name:'爱国主义教育',url:'#'},
                    {name:'研学实践教育',url:'#'},
                    {name:'科普教育',url:'#'},
                ]
            },
            {
                name:"参观服务",url:'#',show:false,subMenus:[
                    {name:'景点介绍',url:'#'},
                    {name:'服务内容',url:'#'},
                    {name:'网上预约',url:'#'},
                    {name:'志愿服务',url:'#'},
                ]
            },
            {
                name:"网上预约",url:'#',show:false,subMenus:[
                    {name:'虚拟展览',url:'#'},
                    {name:'基本陈设',url:'#'},
                    {name:'复原陈设',url:'#'},
                    {name:'临时展览',url:'#'},
                    {name:'展览交流',url:'#'},
                ]
            }
            ]
        }
        const vm=Vue.createApp({
            data(){
                return data;
            }
        }).mount('#app')
    </script>
</body>
</html>